<template>
	<view class="order">
		<view class="topList">
			<view v-for="(item,index) in topList" 
			@tap="changeTab(index)"
			:class="index == current ? 'red' : ''"
			:key="item.name">
				{{ item.name }}
			</view>
		</view>
		<view v-if="current != 4" class="goodsList" v-for="item in newList" :key="item.order.id">
			<view>订单编号:{{ item.order.orderSn }}  {{ item.order.status | statusText }}</view>
			<view v-for="ele in item.items" :key="ele.id">
				商品名称：{{ ele.productName }}
			</view>
			<view>订单时间:{{  item.order.createTime }}</view>
			<view>
				<view v-if="current == 0">
					<button type="default" >取消订单</button>
					<button type="default">付款</button>
				</view>
				<view v-if="current == 2">
					<button type="default">确认收货</button>
					<button type="default" @tap="orderBack">退货</button>
				</view>
				<view v-if="current == 3 &&  item.order.status == 4">
					<button type="default">删除订单</button>
				</view>
			</view>
		</view>
		<view v-else class="returnList">
			<view v-for="item in returnList">
				<view>订单编号:{{ item.orderSn }}  {{ item.status | orderProcessText }}</view>
				<view>
					商品名称：{{ item.productName }}
				</view>
				<view>订单时间:{{  item.createTime }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllOrders,
		orderReturnApplys
	} from "@/api/user/order/index.js"
	export default {
		computed:{
			newList(){
				return this.orderList.filter(ele =>{
					
					if(this.current == 3 ){
						return ele.order.status == 3 || ele.order.status == 4
					}else{
						return ele.order.status == this.current
					}
						
				});
			}
		},
		data() {
			return {
				current:0,
				orderList:[],
				returnList:[],
				topList:[
					{
						name:"待付款"
					},
					{
						name:"已付款"
					},
					{
						name:"已发货"
					},
					{
						name:"已收货"
					},
					{
						name:"申请退款"
					},
				]
			};
		},
		methods:{
			changeTab(val){
				this.current = val
			},
			orderBack(){
				uni.navigateTo({
					url:"./orderBack/orderBack"
				})
			}
		},
		filters:{
			statusText(val){
				if(val == 0){
					return "未付款"
				}else if(val == 1){
					return "确认付款,等待发货"
				}else if(val == 2){
					return "已发货"
				}else if(val == 3){
					return "已收货"
				}else if(val == 4){
					return "已完成"
				}else{
					return "无效订单"
				}

			},
			orderProcessText(process) {
				var text = '等待处理';
				switch (JSON.stringify(process)) {
					case '0':
						text = '等待处理';
						break;
					case '1':
						text = '确认退货,等待用户发货';
						break;
					case '2':
						text = '已退款';
						break;
					case '3':
						text = '已拒绝';
						break;
					case '9':
						text = '拒绝退货';
						break;

					default:
						break;
				}
				return text;
			}
		},
		onLoad() {
			findAllOrders()
			.then(res =>{
				
				this.orderList = res.data.orderList
			})
			orderReturnApplys()
			.then(res =>{
				console.log(res);
				this.returnList = res.data.items;
			})
			
		}
	}
</script>

<style lang="scss" scoped>
.order{
	.topList{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 10px;
	}
	.red{
		color: red;
	}
	.goodsList{
		width: 90%;
		margin: 10px auto;
		border: 1px solid #ccc;
		border-radius: 8px;
		padding: 8px;
		
	}
}
</style>
